import { size, IFormProps, pageSize, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Select } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
import moment from 'moment';
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
import ComplainEdit from "../../components/complains/ComplainEdit";

export interface ICompliansPros extends IFormProps {
    complain: any
}
class Complains extends React.PureComponent<ICompliansPros, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    search = () => {
        this.getComplains();
    }

    getComplains = (payload?) => {
        payload = Object.assign({}, this.props.complain.complainsSearchs, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: "complain/getComplains",
            payload
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    edit = (complain = {}) => {
        this.props.dispatch({
            type: "complain/save",
            payload: { complain }
        });
        this.setVisible(true);
    }

    setVisible = (visible = false) => {
        this.setState({ visible });
    }

    save = (form) => {
        form = Object.assign({}, form);
        this.props.dispatch({
            type: "complain/verifyComplain",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                }
            }
        });
    }

    render(): JSX.Element {
        //console.log(this.props);
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { complain, complains: { totalCount, items }, complainsSearchs: { pageIndex, pageSize, keywords, status, complainType } } = this.props.complain;
        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.complain.complainsSearchs,
                { pageIndex, pageSize });
            this.getComplains(payload);
        }

        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };

        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                    <Form layout="inline">
                            <Form.Item label='审核状态'>
                                {getFieldDecorator('status', {
                                    initialValue: '0'
                                })(<Select style={{ width: 120 }}>
                                    <Select.Option value=''>全部</Select.Option>
                                    <Select.Option value='0'>待审核</Select.Option>
                                    <Select.Option value='1'>已审核</Select.Option>
                                    <Select.Option value='-1'>已驳回</Select.Option>
                                </Select>)}
                            </Form.Item>
                            <Form.Item label='投诉类型'>
                                {getFieldDecorator('complainType', {
                                    initialValue: ''
                                })(<Select style={{ width: 120 }}>
                                    <Select.Option value=''>全部</Select.Option>
                                    <Select.Option value='0'>诈骗</Select.Option>
                                    <Select.Option value='1'>假货</Select.Option>
                                    <Select.Option value='2'>虚假信息</Select.Option>
                                    <Select.Option value='3'>诱导行为</Select.Option>
                                </Select>)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator("keywords", {
                                    initialValue: keywords
                                })(<Input
                                    style={{ width: 200 }}
                                    size={size}
                                    placeholder="输入投诉人姓名"
                                />)}
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>投诉列表</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallComplainsVOComplainViewVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return index + 1
                                }} />
                                <Table.Column title="投诉人" key="userName" dataIndex="userName" />
                                <Table.Column title="投诉时间" key="creationTime" render={(record: any) => {
                                    return record.creationTime && moment(record.creationTime).format(dateTimeFormat);
                                }} />
                                <Table.Column title="投诉类型" key="complainTypeView" dataIndex="complainTypeView" />
                                <Table.Column title="回复" key="remark" dataIndex="remark" />
                                <Table.Column title="审核状态" key="statusView" dataIndex="statusView" />
                                <Table.Column title="审核时间" key="lastModificationTime" render={(record: any) => {
                                    return record.lastModificationTime && (record.status==1|| record.status==-1) ? moment(record.lastModificationTime).format(dateTimeFormat):"无";
                                }} />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallComplainsVOComplainViewVO, index) => {
                                    return (
                                        record.statusView == "待审核"?
                                        <div>
                                            <a className={Styles.M_RIGHT} onClick={() => this.edit(record)}>
                                                审核
                                            </a>
                                        </div>:"无"
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
                {
                    this.state.visible ? (<ComplainEdit visible={this.state.visible}
                        complain={complain}
                        onSave={this.save}
                        onCancel={this.setVisible} />) :
                        (undefined)
                }
            </Row>)
    }
}

export default connect(({ complain, loading: { models: { complain: loading } } }) => ({ complain, loading }))(Form.create()(Complains));
